<template>
    <section
        class="relative c-image"
        v-cloak
    >
        <img
            :src="src"
            :style="imageStyle"
            class="block b-0"
        />
        <div
            v-if="preview"
            class="absolute mask left-0 top-0 hidden w-full h-full z-2"
        >
            <div
                class="bg-#000/30 w-full h-full absolute left-0 right-0 flex justify-center items-center"
            >
                <icon-eye
                    class="text-18 text-#fff cursor-pointer"
                    @click="handlePreviewClick"
                />
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { ImageProps } from './types.d'
import { IconEye } from '@arco-design/web-vue/es/icon'
import previewImage from './preview'

const {
    src,
    preview = true,
    imageStyle = {
        width: 'auto',
        height: '80px'
    },
    list,
    mask = true,
    escCloseable = true,
    maskClosable = true,
    maskBackground = 'rgba(0, 0, 0, 0.45)',
    lockBodyScroll = true
} = defineProps<ImageProps>()

const handlePreviewClick = () => {
    previewImage({
        src,
        mask,
        list,
        escCloseable,
        maskClosable,
        lockBodyScroll,
        maskBackground
    })
}
</script>

<style lang="less" scoped>
.c-image {
    &:hover {
        .mask {
            display: block;
        }
    }
}
</style>
